<template>
  <div class="cartcontrol">
    <transition name="move">
      <div class="cart-decrease" @click="decreaseCart" v-show="food.count>0">
        <img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">
      </div>
    </transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
    <div class="cart-add" @click="addCart">
      <img width="20" height="20" src="../assets/plus1.png" alt="">
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';

  export default {
    name: 'cart-control',
    props: {
      food: {
        type: Object
      },
      allGoods: {
        type: Array
      },
      totalCount: {
        type: Number
      }
    },
    data() {
      return {}
    },
    methods: {
      addCart() {
        // Vue.set(this.food, 'nickname', null);
        if (!this.food.nickname) {
          Vue.set(this.food, 'nickname', localStorage.getItem('nickname'));
          Vue.set(this.food, 'headimgurl', localStorage.getItem('headimgurl'));
          Vue.set(this.food, 'openid', localStorage.getItem('openid'));
        }
        for (let key in JSON.parse(this.food.specifications)[0]) {
          if (key === 'price') {
            // 如果没有规格直接加入购物车
            if (!this.food.count) {
              Vue.set(this.food, 'count', 1);
            } else {
              this.food.count++;
            }
            localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
            this.$emit('refreshselectfoods', ''); // 刷新购物车
          } else {
            // 如果有规格弹出选择规格框
            console.log('弹出点菜主页该id的规格框 ' + this.food.id);
            this.$emit('closespec', this.food);
          }
        }
        // if (!this.food.count) {
        //   Vue.set(this.food, 'count', 1);
        // } else {
        //   this.food.count++;
        // }
        // console.log(this.allGoods);
        // localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
      },
      decreaseCart() {
        for (let key in JSON.parse(this.food.specifications)[0]) {
          if (key === 'price') {
            if (this.food.count) {
              this.food.count--;
            }
            localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
            // console.log(this.totalCount)
            // if (this.totalCount - 1 === 0) {
            //   console.log(222)
            // this.$emit('closefold', false);
            // }
            if (this.food.count === 0) {
              Vue.set(this.food, 'nickname', null);
            }
            this.$emit('refreshselectfoods', ''); // 刷新购物车
          } else {
            this.$emit('showshopcart', true);
          }
        }
        // if (this.food.count) {
        //   this.food.count--;
        // }
        // localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        //
        // if (this.totalCount - 1 === 0) {
        //   this.$emit('closefold', false);
        // }
      }
    },
    created() {
      // console.log(this.food);
    }
  }
</script>

<style scoped lang="scss">
  .cartcontrol {
    font-size: 0;
    .cart-decrease {
      vertical-align: top;
      display: inline-block;
      padding: 0 6px;
      transition: all 0.4s linear;
      &.move-enter-to {
        opacity: 1;
        transform: translate3D(0, 0, 0);
      }
      .inner {
        transition: all 0.4s linear;
        transform: rotate(0);
      }
      &.move-enter, &.move-leave-to {
        opacity: 0;
        transform: translate3D(24px, 0, 0);
        .inner {
          transform: rotate(180deg);
        }
      }
    }
    .cart-count {
      vertical-align: middle;
      display: inline-block;
      width: 24px;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      color: #333;
    }
    .cart-add {
      vertical-align: top;
      display: inline-block;
      padding: 0 6px;
    }
  }
</style>
